import React from 'react';
import { Clock, MapPin, Trash2 } from 'lucide-react';
import { FishEvent, DateFilter } from '../types';
import { fishCategories } from '../data/categories';
import { DateUtil } from '../utils/storage';

interface EventListProps {
  events: FishEvent[];
  dateFilter: DateFilter;
  onDateFilterChange: (filter: DateFilter) => void;
  onDeleteEvent: (eventId: string) => void;
}

const EventList: React.FC<EventListProps> = ({
  events,
  dateFilter,
  onDateFilterChange,
  onDeleteEvent
}) => {
  const filterButtons = [
    { key: 'today' as DateFilter, label: '今天', icon: '📅' },
    { key: 'week' as DateFilter, label: '本周', icon: '📆' },
    { key: 'month' as DateFilter, label: '本月', icon: '🗓️' },
    { key: 'all' as DateFilter, label: '全部', icon: '📋' }
  ];

  const filteredEvents = events.filter(event => {
    switch (dateFilter) {
      case 'today':
        return DateUtil.isToday(event.timestamp);
      case 'week':
        return DateUtil.isThisWeek(event.timestamp);
      case 'month':
        return DateUtil.isThisMonth(event.timestamp);
      default:
        return true;
    }
  });

  const getCategoryInfo = (categoryId: string) => {
    return fishCategories.find(cat => cat.id === categoryId) || fishCategories[0];
  };

  if (events.length === 0) {
    return (
      <div className="bg-white rounded-lg shadow-md p-8 text-center">
        <div className="text-6xl mb-4">🐟</div>
        <h3 className="text-lg font-medium text-gray-800 mb-2">还没有摸鱼记录</h3>
        <p className="text-gray-600">开始记录你的第一次摸鱼时光吧！</p>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-6 animate-slide-up hover:shadow-lg transition-shadow duration-300">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-xl font-bold text-gray-800 animate-fade-in-up">摸鱼历史记录</h2>
        <div className="flex gap-2">
          {filterButtons.map((button, index) => (
            <button
              key={button.key}
              onClick={() => onDateFilterChange(button.key)}
              className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 transform hover:scale-105 active:scale-95 animate-fade-in-up ${
                dateFilter === button.key
                  ? 'bg-blue-500 text-white shadow-md animate-pulse-gentle'
                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200 hover:shadow-md'
              }`}
              style={{ animationDelay: `${index * 100}ms` }}
            >
              {button.icon} {button.label}
            </button>
          ))}
        </div>
      </div>

      {filteredEvents.length === 0 ? (
        <div className="text-center py-8">
          <div className="text-4xl mb-4">😴</div>
          <p className="text-gray-600">该时间段内没有摸鱼记录</p>
        </div>
      ) : (
        <div className="space-y-4">
          {filteredEvents.map((event, index) => {
            const category = getCategoryInfo(event.type);
            
            return (
              <div
                key={event.id}
                className="border border-gray-200 rounded-lg p-4 hover:shadow-lg transition-all duration-300 transform hover:scale-102 animate-fade-in-up hover:border-blue-200"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="flex items-start justify-between">
                  <div className="flex items-start gap-4">
                    <div className={`w-12 h-12 ${category.color} rounded-lg flex items-center justify-center text-white text-xl animate-bounce-gentle hover:animate-spin-slow transition-all duration-300`}>
                      {category.icon}
                    </div>
                    
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <h3 className="font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-200">{category.name}</h3>
                        <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full animate-pulse-gentle hover:bg-blue-200 transition-colors duration-200">
                          {DateUtil.formatDuration(event.duration)}
                        </span>
                      </div>
                      
                      <div className="flex items-center gap-4 text-sm text-gray-600 mb-2">
                        <div className="flex items-center gap-1">
                          <Clock className="h-4 w-4" />
                          {DateUtil.formatDate(event.timestamp)} {DateUtil.formatTime(event.timestamp)}
                        </div>
                        <div className="flex items-center gap-1">
                          <MapPin className="h-4 w-4" />
                          {event.location}
                        </div>
                      </div>
                      
                      {event.description && (
                        <p className="text-gray-700 text-sm">{event.description}</p>
                      )}
                    </div>
                  </div>
                  
                  <button
                    onClick={() => onDeleteEvent(event.id)}
                    className="text-gray-400 hover:text-red-500 transition-all duration-200 p-2 hover:scale-110 active:scale-95 hover:bg-red-50 rounded-lg"
                    title="删除记录"
                  >
                    <Trash2 className="h-4 w-4 hover:animate-wiggle" />
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default EventList;